import React, { useState } from 'react'
import { PhoneO } from '@react-vant/icons'
import {  Toast, hooks, Button, Input, Form,  Picker } from 'react-vant'
import { PhoneRecharge } from '../sevice/PhoneServe'

export default function Recharge() {

    const [state, set] = hooks.useSetState({
        visible: false,
        value: '',
    })

    const Btn = () => {      //请求
        console.log(state.value);
    }


    //form表单
    const [form] = Form.useForm()

    //清空表单
    const reset = () => {
        form.resetFields()
    }

    //控制类型是否显示
    let [isshow, setisshow] = useState('')
    const setMyInputValue = (v) => {
        setisshow(v)
    }



    const onFinish = async (values) => {
        

        let { data } = await PhoneRecharge({
            phonenumber: values.phonenumber,
            rechargeAmount: values.rechargeAmount,
            paymentType: values.paymentType,
            ruleId: values.ruleId,
            type: values.type
        })

        if (data.code == 200) {
            Toast.loading({
                message: '充值成功...',
                forbidClick: true,
            })
        
            reset()
        }
    }


    return (
        <div>

            <div style={{ backgroundColor: '#F7F7F9' }}>

                <Form
                    form={form}
                    onFinish={onFinish}
                    footer={
                        <div style={{ margin: '16px 16px 0' }}>
                            <Button round nativeType='submit' type='primary' block>
                                提交
                            </Button>
                        </div>
                    }>


                    <Form.Item
                        leftIcon={<PhoneO spin style={{ fontSize: 30 }} />}
                        style={{
                            fontSize: 20, background: 'red',
                            marginTop: 10, padding: 20, borderRadius: 10, color: ' #ffffff'
                        }}
                        rules={[{ required: true, pattern: /\d{11}/, message: '请输入11位数字' }]}
                        name='phonenumber'
                        label='手机号'
                    >
                        <Input placeholder='请输入手机号' />
                    </Form.Item>


                    <Form.Item
                        rules={[{ required: true, message: '请选择支付类型' }]}
                        isLink
                        name='paymentType'
                        label='支付类型'
                        trigger='onConfirm'
                        onClick={(_, action) => {
                            action.current?.open()
                        }}
                    >
                        <Picker
                            popup
                            columns={[
                                '电子支付',
                                '微信',
                                '支付宝']}>
                            {val => val || '请选择支付类型'}
                        </Picker>
                    </Form.Item>

                    <Form.Item
                        rules={[{ required: true, message: '请选择充值类型' }]}
                        isLink
                        name='type'
                        label='充值类型'
                        trigger='onConfirm'
                        onClick={(_, action) => {
                            action.current?.open()
                        }}
                    >
                        <Picker
                            onChange={(v) => {
                                setMyInputValue(v);
                            }}
                            popup
                            columns={[
                                '1',
                                '2',
                            ]}>
                            {val => val || '1 自由充值 2 优惠策略充值'}
                        </Picker>
                    </Form.Item>

                    {isshow == '2' ?
                        <Form.Item
                            rules={[{ required: true, message: '请选择优惠策略' }]}
                            isLink
                            name='ruleId'
                            label='优惠策略'
                            trigger='onConfirm'
                            onClick={(_, action) => {
                                action.current?.open()
                            }}
                        >
                            <Picker
                                popup
                                columns={[
                                    '1'
                                ]}>
                                {val => val || '优惠策略'}
                            </Picker>
                        </Form.Item> : ''}


                    <Form.Item
                        rules={[{ required: true, message: '请输入缴费金额' }]}
                        name='rechargeAmount'
                        label='缴费金额'
                    >
                        <Input placeholder='请输入缴费金额' />
                    </Form.Item>


                </Form>

            </div>

        </div>
    )
}
